import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import viteCompression from "vite-plugin-compression";
import legacyPlugin from "@vitejs/plugin-legacy";
import styleImport from "vite-plugin-style-import";
import ViteComponents, { ElementPlusResolver } from "vite-plugin-components";
import postcsspxtoviewport from "postcss-px-to-viewport";
import path from "path";
console.log("ViteComponents", ViteComponents);
export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    //按需导入element-plus组件
    ViteComponents({
      customComponentResolvers: [ElementPlusResolver({ importStyle: true })],
    }),
    //按需导入element-plus的css样式
    styleImport({
      libs: [
        {
          libraryName: "element-plus",
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/dist/index.css`;
          },
        },
      ],
    }),
    // 文件压缩
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: "gzip",
      ext: ".gz",
    }),
    // 配置兼容性
    legacyPlugin({
      targets: ["chrome 52", "ie>=11"], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 面向IE11时需要此插件
    }),
  ],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./"),
      "@": path.resolve(__dirname, "src"),
      "^": path.resolve(__dirname, "../../static/images"),
    },
  },
  server: {
    port: "3333",
    cors: true,
    // open: true,
    // host: '0.0.0.0'
    // hot: true
    proxy: {
      "/api": {
        target: "http://123.56.90.95:4000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      "/test": {
        target: "http://backend-api-02.newbee.ltd/manage-api/v1",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/test/, ""),
      },
      "/login": {
        target: "http://123.56.90.95:88",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/login/, ""),
      },
      "/qqweather": {
        target: "https://wis.qq.com/weather",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/qqweather/, ""),
      },
    },
  },
  build: {
    // 清除console和debugger
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        // 文件分类
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        // 超大静态资源拆分
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: "px", // 要转化的单位
          viewportWidth: 1080, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["box"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值 // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          exclude: [],
          landscape: false, // 是否处理横屏情况
        }),
      ],
    },
    // 全局引入scss
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/scss/index.scss";',
      },
    },
  },
});
// tree-shaking 去除无用代码
